<script setup lang="ts">
import {
  realtimeWarningStates,
  warningLevels,
} from '@/mixins/Warning'

defineEmits<{
  (e: 'search'): void
}>()

const query: {
  state?: number
  type?: number
} = shallowReactive({
  state: undefined,
  type: undefined,
})

defineExpose({
  query,
})
</script>

<template>
  <ElForm inline :model="query">
    <ElFormItem label="告警状态">
      <ElSelect
        v-model="query.state"
        clearable
        filterable
        @clear="query.state = undefined"
      >
        <ElOption
          v-for="item in realtimeWarningStates"
          :key="item.value"
          v-bind="item"
        />
      </ElSelect>
    </ElFormItem>
    <ElFormItem label="告警类型">
      <ElSelect
        v-model="query.type"
        clearable
        filterable
        @clear="query.type = undefined"
      >
        <ElOption
          v-for="item in warningLevels"
          :key="item.value"
          v-bind="item"
        />
      </ElSelect>
    </ElFormItem>
    <ElFormItem>
      <SearchButton @click="$emit('search')" />
    </ElFormItem>
  </ElForm>
</template>
